<template>
  <el-dialog title="选择季度用水量" :visible.sync="selectAndQuarterDialogVisible" width="60%">
    <!-- 表单 -->
    <el-form ref="ruleForm" :model="dataForm" :rules="dataRules" label-width="130px">
      <el-row>
        <el-col :span="10">
          <el-form-item label="公司名称" prop="companyName">
            <el-autocomplete
              style="width:100%"
              clearable
              @clear="handleClear"
              v-model="dataForm.companyName"
              :fetch-suggestions="querySearch"
              placeholder="请输入公司名称"
              :trigger-on-focus="false"
              @select="handleSelect"
            ></el-autocomplete>
          </el-form-item>
        </el-col>
        <el-col :span="10">
          <el-form-item label="公司类型">
            <el-input v-model="companyTypeName" readonly disabled></el-input>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="10">
          <el-form-item label="单位地址">
            <el-input v-model="companyAddress" readonly disabled></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="10">
          <el-form-item label="用水类型" prop="waterTypeId">
            <el-select v-model="dataForm.waterTypeId" placeholder="请选择" style="width:100%">
              <el-option
                v-for="item in waterTypeList"
                :key="item.id"
                :label="item.name"
                :value="item.id"
              ></el-option>
            </el-select>
          </el-form-item>
        </el-col>
      </el-row>

      <el-row>
        <el-col :span="10">
          <el-form-item label="所属年份" prop="cycleDate">
            <el-date-picker
              v-model="dataForm.cycleDate"
              type="year"
              value-format="yyyy"
              placeholder="选择年"
              style="width:100%"
            ></el-date-picker>
          </el-form-item>
        </el-col>
        <el-col :span="10">
          <el-form-item label="季度选择" prop="quarter">
            <el-select v-model="dataForm.quarter" placeholder="请选择" style="width:100%">
              <el-option
                v-for="item in listData"
                :key="item.value"
                :label="item.name"
                :value="item.value"
              ></el-option>
            </el-select>
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>
    <span slot="footer" class="dialog-footer">
      <el-button @click="selectAndQuarterDialogVisible = false">取 消</el-button>
      <el-button type="primary" @click="handleSubmit">确 定</el-button>
    </span>
  </el-dialog>
</template>

<script>
import { getAllCompany,getAllWaterType } from '@/api/base'
export default {
  data() {
    return {
      selectAndQuarterDialogVisible: false,
      dataForm: {
        companyName: '',
        cycleDate: '',
        quarter: '',
        waterTypeId:''
      },
      dataRules: {
        companyName: [
          { required: true, message: '请输入公司', trigger: 'change' },
        ],
        cycleDate: [
          { required: true, message: '请选择年份', trigger: 'change' },
        ],
        quarter: [
          { required: true, message: '请选择季度', trigger: 'change' },
        ],
        waterTypeId: [
          { required: true, message: '请选择用水类型', trigger: 'change' },
        ],
      },
      listData: [
        {
          value: 1,
          name: "第一季度"
        },
        {
          value: 2,
          name: "第二季度"
        },
        {
          value: 3,
          name: "第三季度"
        },
        {
          value: 4,
          name: "第四季度"
        }
      ],
      companyList: [],
      waterTypeList: [], // 用水类
      companyAddress: '', // 公司地址
      companyTypeName: '', // 公司类型
    }
  },
  mounted() { },
  methods: {
    async init() {
      this.reset();
      this.selectAndQuarterDialogVisible = true
      this.$nextTick((_) => {
        this.$refs['ruleForm'].resetFields()
      })
      this.getAllCompanyReq() // 所有公司
      this.getAllWaterTypeReq()
    },
    // 表单重置
    reset() {
      for (var key in this.dataForm) {
        if (Array.isArray(this.dataForm[key])) {
          this.dataForm[key] = []
        } else {
          this.dataForm[key] = ''
        }
      }
      this.companyAddress = '' // 公司地址
      this.companyTypeName = '' // 公司类型
    },
    getAllCompanyReq() {
      getAllCompany({ page: 1, pageSize: 100 }).then((res) => {
        const { code, data, msg } = res
        if (code !== '0000') return this.$message.error(msg)
        this.companyList = data.list
      })
    },
    getAllWaterTypeReq() {
      getAllWaterType().then((res) => {
        const { code, data, msg } = res
        if (code !== '0000') return this.$message.error(msg)
        this.waterTypeList = data
      })
    },
    handleSelect(item) {
      this.dataForm.companyId = item.id
      this.companyTypeName = item.companyTypeResponse.companyTypeName
      this.companyAddress = item.companyAddress
    },
    handleSubmit() {
      this.$refs.ruleForm.validate(async (valid) => {
        if (!valid) return
        this.selectAndQuarterDialogVisible = false
        this.$bus.$emit('selectAndQuarter', this.dataForm)
      })
    },
    // 清空的回调
    handleClear() {
      this.companyAddress = ''
      this.companyTypeName = ''
      this.dataForm.companyId = ''
      this.dataForm.companyName = ''
    },
  }
}
</script>

<style>
</style>
